/*
* module: @/views/budget/list_download/localList_download
* author:zengfx
* data:2020-12-3
*/
<template>
  <div class="localList_container">
    <header>
      <p>本地清单下载</p>
      <!-- <el-button size="mini" @click="handle_back">返回</el-button> -->
    </header>
    <main>
      <el-form :inline="true" :model="form" class="main_searchBar" ref="form">
        <el-form-item label="报表名称:">
          <el-select size="mini" v-model="form.reportName" clearable v-loading="showSelectLoading">
            <el-option v-for="(item, index) in reportList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" id="search_btn" @click="handle_search">查询</el-button>
          <el-button size="mini" id="export_btn" @click="handle_export">导出</el-button>
        </el-form-item>
      </el-form>
      <div class="localList_table" v-if="tableData.length && tableData.length > 0">
        <el-table
          :max-height="height+'px'"
          id="table1"
          size="mini"
          :header-cell-style="{ background: '#eef1f6' }"
          :data="tableData"
          v-loading="tableLoading"
          style="width: 100%;"
          border
        >
          <el-table-column min-width="120" align="center" v-for="(item, index) in titleList" :key="index" :label="item">
            <template slot-scope="scope">
              <span>{{scope.row["value" + index]}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </main>
  </div>
</template>

<script>
import { $budgetAPI } from '@/api';
// 引入导出Excel表格依赖
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export default {
    data() {
        return {
            reportList: [],
            form: {
                reportName: ''
            },
            tableLoading: false,
            tableData: [],
            tableData1: [],
            height: '',
            showSelectLoading: false,
            titleList: []
        };
    },
    mounted() {
        this.getHeight();
        this.getInit();
    },
    methods: {
        getHeight() {
            this.height = window.innerHeight - this.$refs.form.$el.offsetHeight - 83 - 54 - 51 - 40 - 10;
        },
        handle_search() {
            var that = this;
            this.tableLoading = true;
            $budgetAPI.getReportSQL(
                { id: this.form.reportName },
                res => {
                    if (res.content.code == 0) {
                        that.titleList = res.content.content.tableHeader;
                        that.tableData = res.content.content.data.slice(0, 10);
                        that.tableData1 = res.content.content.data;
                    }
                    this.tableLoading = false;
                },
                err => {
                    this.tableLoading = false;
                }
            );
        },
        handle_export() {
            let that = this, data = JSON.parse(JSON.stringify(that.tableData1));
            var xlsxParam = {
                raw: true
            };
            let workbook = XLSX.utils.book_new();
            

            data.map(it => {
                Object.keys(it).sort().map((item, i) => {
                    it[that.titleList[i]] = it['value' + i];
                    delete it['value' + i];
                })
            })
            let ws = XLSX.utils.json_to_sheet(data, {
                header: that.titleList
            });
            XLSX.utils.book_append_sheet(workbook, ws, '本地清单');
              let wbOut = XLSX.write(workbook, {
                bookType: "xlsx",
                bookSST: true,
                type: "array"
              });
              try {
                FileSaver.saveAs(
                  new Blob([wbOut], {
                    type: "application/octet-stream"
                  }),
                  "本地清单下载.xlsx" //Demo.xlsx为导出的表格的名称
                );
              } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbOut);
              }
              return wbOut;

            // let workbook = XLSX.utils.book_new();
            // let ws1 = XLSX.utils.table_to_sheet(document.querySelector('#table1'), xlsxParam);
            // XLSX.utils.book_append_sheet(workbook, ws1, '本地清单');
            // let wbout = XLSX.write(workbook, {
            //     bookType: 'xlsx',
            //     bookSST: true,
            //     type: 'array'
            // });
            // try {
            //     FileSaver.saveAs(
            //         new Blob([wbout], {
            //             type: 'application/octet-stream'
            //         }),
            //         '本地清单下载.xlsx'
            //     );
            // } catch (e) {
            //     if (typeof console !== 'undefined') console.log(e, wbOut);
            // }
            // return wbout;
        },
        getInit() {
            this.showSelectLoading = true;
            $budgetAPI.getReportSQLList(
                {},
                res => {
                    if (res.code == 0) {
                        let param = {
                            name: '',
                            id: ''
                        };
                        res.content.data.map(item => {
                            this.reportList.push({
                                name: item.rportnanme,
                                id: item.id
                            });
                        });
                        this.form.reportName = this.reportList[0].id;
                        this.handle_search();
                    }
                    this.showSelectLoading = false;
                },
                err => {
                    this.showSelectLoading = false;
                }
            );
        }
    }
};
</script>

<style lang="scss" scoped>
.localList_container {
    & > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        height: 40px;
        margin: 0 -20px;
        padding: 0 20px;
        & > p {
            font-weight: bold;
            font-size: 15px;
        }
    }
    & > main {
        margin-top: 10px;
        padding: 10px;
        .main_searchBar {
            border-bottom: 1px solid #d6d9e5;
            /deep/ .el-form-item {
                margin: 6px 10px 6px 0;
            }
            /deep/ .el-form--inline .el-form-item {
                vertical-align: middle;
            }
            button {
                color: #fff;
                border: none;
                outline: none;
                &:hover {
                    opacity: 0.8;
                }
            }
            #search_btn {
                background-color: #2a90de;
            }
            #export_btn {
                background-color: #2cd531;
            }
        }
    }
}
</style>